<template>
    <div class="drawer-table">
        <a-drawer
                :title="title"
                placement="right"
                :width="width"
                :closable="false"
                :visible="visible"
                @close="onClose"
        >
            <slot name="search" v-if="visibleTable">

            </slot>
            <a-table
                    :bordered="bordered"
                    :loading="loading"
                    :columns="columns"
                    :dataSource="dataSource"
                    :rowKey="rowKey"
                    :pagination="pagination"
                    :expandedRowKeys="expandedRowKeys"
                    :expandedRowRender="expandedRowRender"
                    v-if="visibleTable"
                    @change="onChange"
                    :rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined"
            >
                <template slot-scope="text, record, index" :slot="slot" v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender') ">
                    <slot :name="slot" v-bind="{text, record, index}"></slot>
                </template>
                <template :slot="slot" v-for="slot in Object.keys($slots)">
                    <slot :name="slot"></slot>
                </template>
                <template slot-scope="record, index, indent, expanded" :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''">
                    <slot v-bind="{record, index, indent, expanded}" :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"></slot>
                </template>
            </a-table>

            <slot name="drawerSlot">

            </slot>

        </a-drawer>

    </div>
</template>

<script>
    export default {
        name: 'DrawerTable',
        props: {
            bordered: Boolean,
            loading: [Boolean, Object],
            columns: Array,
            dataSource: Array,
            title: String,
            width: String,
            rowKey: {
                type: [String, Function],
                default: 'key'
            },
            pagination: {
                type: [Object, Boolean],
                default: true
            },
            selectedRows: Array,
            expandedRowKeys: Array,
            expandedRowRender: Function,
            visible: {
                type: [Object, Boolean],
                default: false
            },
            visibleTable: {
                type: [Object, Boolean],
                default: true
            }
        },
        data () {
            return {
                needTotalList: []
            }
        },
        methods: {
            updateSelect (selectedRowKeys, selectedRows) {
                this.$emit('update:selectedRows', selectedRows)
                this.$emit('selectedRowChange', selectedRowKeys, selectedRows)
            },
            initTotalList (columns) {
                const totalList = columns.filter(item => item.needTotal)
                    .map(item => {
                        return {
                            ...item,
                            total: 0
                        }
                    })
                return totalList
            },
            onClear() {
                this.updateSelect([], [])
                this.$emit('clear')
            },
            onChange(pagination, filters, sorter, {currentDataSource}) {
                this.$emit('change', pagination, filters, sorter, {currentDataSource})
            },
            onClose() {
                this.$emit('close');
            }
        },
        created () {
            this.needTotalList = this.initTotalList(this.columns)
        },
        watch: {
            selectedRows (selectedRows) {
                this.needTotalList = this.needTotalList.map(item => {
                    return {
                        ...item,
                        total: selectedRows.reduce((sum, val) => {
                            let v
                            try{
                                v = val[item.dataIndex] ? val[item.dataIndex] : eval(`val.${item.dataIndex}`);
                            }catch(_){
                                v = val[item.dataIndex];
                            }
                            v = !isNaN(parseFloat(v)) ? parseFloat(v) : 0;
                            return sum + v
                        }, 0)
                    }
                })
            }
        },
        computed: {
            selectedRowKeys() {
                return this.selectedRows.map(record => {
                    return (typeof this.rowKey === 'function') ? this.rowKey(record) : record[this.rowKey]
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .drawer-table{
        .alert{
            margin-bottom: 16px;
            .message{
                a{
                    font-weight: 600;
                }
            }
            .clear{
                float: right;
            }
        }
    }
</style>
